<template>
	<div id="app" :style="{ backgroundImage: `url(${coverImgUrl})` }">
		<div class="banner">
			<el-cascader
			placeholder="请选择或搜索城市"
				:filterable="true"
				size="large" 
				:options="options" 
				v-model="selectedOptions" 
				:props="{ expandTrigger: 'hover' }" 
				@change="handleChange"
				>
				
			</el-cascader>
			<div class="detail"
				 v-if="Object.keys(weatherData).length"
				>
				<div class="address">
					<i class="el-icon-location"></i>{{weatherData.basic.city}}
				</div>
				<div class="time">
					{{weatherData.basic.update.loc}}
				</div>
				<div class="weather">
					{{weatherData.now.cond.txt}}
				</div>
				<!-- 风向 -->
				<div class="wind">
					{{weatherData.now.wind.dir}}
				</div>
				<div class="temp">
					{{weatherData.now.tmp}}°C
				</div>
				<div class="prediction">
					未来五天的天气
				</div>
				<div v-if="tableData.length">
					<el-table
					      :data="tableData"
					      border
					      style="width: 100%; margin-top: 20px">
					      <el-table-column
					        prop="date"
					        label="日期"
							width="150px"
					        >
					      </el-table-column>
					      <el-table-column
					        prop="cond.txt_d"
					        label="天气">
					      </el-table-column>
					      <el-table-column
					        prop="tmp.min"
					        label="最低温度">
					      </el-table-column>
					      <el-table-column
					        prop="tmp.max"
					        label="最高温度">
					      </el-table-column>
					      <el-table-column
					        prop="wind.dir"
					        label="风向">
					      </el-table-column>
					    </el-table>
				</div>
			</div>
			<div v-else class="suggestion">
				<h1>选择城市开始查询天气吧</h1>
			</div>
		</div>
	</div>
</template>

<script>
	
	import { regionData, CodeToText } from "element-china-area-data";
	export default {
		name: 'App',
		data() {
			return {
				coverImgUrl: require('@/assets/index.webp'),
				options: regionData,
				selectedOptions: [],
				city:'',
				weatherData:[],
				tableData:[]
			};
		},
		methods: {
			async handleChange() {
			      var loc = [];
				  // 遍历选项把地址添加到loc中
			      for (let i = 0; i < this.selectedOptions.length; i++) {
			        loc.push(CodeToText[this.selectedOptions[i]]);
			      }
				  // 判断地址若为为市辖区，则取二级地址
				  if(loc[loc.length-1]==='市辖区'){
				  					 this.city=loc[loc.length-2]
				  }else{
				  					  this.city=loc[loc.length-1]
				  }
				  // 获取后台数据
				  const res=await this.$api.getCityWeather(this.city)
				  // 判断若二级地址无法查询则返回到以及地址查询
				  if(res.status==='ok'){
					  this.weatherData=res
				  }else{
					 const res2= await this.$api.getCityWeather(loc[loc.length-2])
					this.weatherData=res2
				  }
				  this.tableData = this.weatherData.daily_forecast.splice(1,5)
				  this.coverImgUrl = require(`@/assets/${this.weatherData.now.cond.txt}.webp`);
				 
			},
		}


	}
</script>

<style>
	* {
		margin: 0px;
		padding: 0px;
	}

	#app {
		width: 100vw;
		height: 100vh;
		background-size: cover;
		display: flex;justify-content: center;
	}
	.banner{
		/* margin:  auto; */
		/* justify-content: center; */
		width: 500px;
		height: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* background-color: #0000FF; */
	}
	.el-cascader{
		margin-top: 50px;
		width: 350px;
	}
	.detail{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 500px;
		font-size:24px;
		margin-top: 10px;
		color:#FFFFFF;
		font-weight: bold;
	}
	.address{
		text-shadow: 2px 2px 4px #000000;
	}
	.time{
		letter-spacing:5px;
		text-shadow: 2px 2px 4px #000000;
	}
	.weather{
		font-size:85px;
		font-family: "PingFang SC";
		font-style: italic;
		text-shadow: 2px 2px 4px #000000;
	}
	.wind{
		font-size: 18px;
		color: #000000;
		font-weight: 500;
	}
	.temp{
		font-size: 18px;
		color: #000000;
		font-weight: 500;
	}
	.suggestion{
		color: #FFFFFF;
	}

</style>
